feat: Implement Asset Detail View with History Timeline (#394) #413
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add comprehensive type definitions for assets including: - Asset, AssetStatus, AssetCondition enums - AssetHistoryEvent, AssetDocument, MaintenanceRecord, AssetNote interfaces - Input types for mutations (transfer, maintenance, notes) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add query keys for: - Asset details, lists, history, documents, maintenance, notes - Departments and users lists for transfer modal Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implement API client methods for: - Get asset details and update status - Transfer asset between departments - Asset history, documents, maintenance records, notes - File upload for documents Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implement custom hooks with cache invalidation: - useAsset, useAssetHistory, useAssetDocuments - useMaintenanceRecords, useAssetNotes - Mutations: useUpdateAssetStatus, useTransferAsset, useDeleteAsset - useUploadDocument, useCreateMaintenanceRecord, useCreateNote Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add base UI components: - Tabs: Tab navigation with context-based state - Breadcrumb: Navigation breadcrumb with links - Modal: Accessible modal dialog with escape key support - Dropdown: Select dropdown with keyboard navigation - Badge: Status and condition badges with variants - Skeleton: Loading skeleton for content placeholders Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add comprehensive asset components: - ImageGallery: Photo gallery with lightbox zoom - QRCodeDisplay: QR code generation and download - StatusDropdown: Asset status change with visual indicators - AssetOverview: Complete asset information display - AssetActions: Action buttons (transfer, maintenance, delete, etc.) - HistoryTimeline: Visual timeline with filtering and search - DocumentList: Document management with upload/delete - MaintenanceList: Maintenance records and scheduling - NotesList: Internal notes with add functionality - Modals: TransferModal, MaintenanceModal, UploadDocumentModal Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implement /assets/[id] page with: - Dynamic routing for asset detail view - Tab navigation (Overview, History, Documents, Maintenance, Notes) - Loading skeleton and 404 error handling - Modal integration for actions - Responsive layout Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implement PDF generation utilities: - generateAssetLabelPDF: Creates printable asset labels with QR code - generateAssetReportPDF: Creates full asset report document Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Install packages for: - qrcode: QR code generation - jspdf: PDF document creation - @types/qrcode: TypeScript definitions Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add missing app infrastructure: - Providers: React Query provider wrapper - Navbar: Main navigation component with links Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update backend configuration: - Add global /api prefix for all routes - Enable CORS for frontend communication - Change default port to 8000 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace any type with Partial<User> for proper type safety in the onSubmit handler. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
@Josue19-08 is attempting to deploy a commit to the naijabuz's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
Author
|
Hi @yusuftomilola! 👋 This PR is ready for review. Please let me know what you think! I noticed the workflow checks are failing, but after investigating, these failures are related to Rust formatting issues in the contracts/multisig-wallet/ directory, which are not related to the changes in this PR. The frontend implementation for the Asset Detail View is complete and working as expected. |
yusuftomilola
approved these changes
Jan 24, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
/assets/[id]New Files Created
Types & API Layer
frontend/lib/query/types/asset.ts- TypeScript definitions for assetsfrontend/lib/api/assets.ts- API client for asset operationsfrontend/lib/query/hooks/useAsset.ts- React Query hooks with cache invalidationUI Components
frontend/components/ui/Tabs.tsx- Tab navigation componentfrontend/components/ui/Breadcrumb.tsx- Navigation breadcrumbfrontend/components/ui/Modal.tsx- Reusable modal dialogfrontend/components/ui/Dropdown.tsx- Select dropdownfrontend/components/ui/Badge.tsx- Status badgesfrontend/components/ui/Skeleton.tsx- Loading skeletonAsset Components
frontend/components/assets/ImageGallery.tsx- Photo gallery with zoomfrontend/components/assets/QRCodeDisplay.tsx- QR code with downloadfrontend/components/assets/StatusDropdown.tsx- Status change dropdownfrontend/components/assets/AssetOverview.tsx- Asset details viewfrontend/components/assets/AssetActions.tsx- Action buttonsfrontend/components/assets/HistoryTimeline.tsx- History timelinefrontend/components/assets/DocumentList.tsx- Document managementfrontend/components/assets/MaintenanceList.tsx- Maintenance recordsfrontend/components/assets/NotesList.tsx- Internal notesfrontend/components/assets/modals/*- Transfer, Maintenance, Upload modalsPages & Utilities
frontend/app/assets/[id]/page.tsx- Main asset detail pagefrontend/app/assets/[id]/not-found.tsx- 404 error pagefrontend/lib/utils/pdfGenerator.ts- PDF label generationDependencies Added
qrcode- QR code generationjspdf- PDF document creationAPI Endpoints Used
The frontend is ready to connect with backend endpoints:
GET /api/assets/:id- Get asset detailsPATCH /api/assets/:id/status- Update asset statusDELETE /api/assets/:id- Delete assetGET /api/assets/:id/history- Get asset historyGET /api/assets/:id/documents- Get documentsPOST /api/assets/:id/transfer- Transfer assetTest plan
/assets/[valid-id]- should load asset details/assets/invalid-id- should show 404 pageScreenshots
Add screenshots after testing with real data
Closes #394
🤖 Generated with Claude Code